<template>
  <div class="similar-singer">
    <home-nav title="相似歌手" :more="false"/>
    <ul class="grid grid-cols-3 gap-4">
      <li v-for="artist in artists" :key="artist.id" class="cursor-pointer mx-auto" @click="jumpArtistDetails(artist.id)">
        <div class="w-15 h-15">
          <img class="w-full h-full" :src="artist.img1v1Url" alt="">
        </div>
        <span class="inline-block w-15 truncate yu-textColor-hover text-sm ">{{ artist.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {useStore} from "@/store/index"
import {useRoute, useRouter} from "vue-router"
import {reactive, toRefs} from "vue";

const router = useRouter()
const route = useRoute()
const store = useStore()
const data = reactive({
  artists: [] // 相似歌手
})
const { artists } = toRefs(data)
// 获取相似歌手信息
store.getSimiArtist(route.query.id).then(artists => {
  data.artists = artists.slice(0, 6)
})
// 跳转到歌手详情
// 跳转到歌手详情
const jumpArtistDetails = (id) => {
  router.push({
    path: '/artist',
    query: {
      id
    }
  })
}

</script>

<style scoped>

</style>
